<template>
  <div class="login-container" style="margin-top: 20px;">
    <!-- <h2 style="text-align: center; margin-top: 12px;">登录</h2> -->
    <form @submit.prevent="handleLogin">
      <div class="form-group">
		  <p>
        用户名：
		  </p>
        <input type="text" v-model="user.username" id="username" required />
      </div>
      <div class="form-group">
		<p>
		密码：
		</p>
        <input type="password" v-model="user.password" id="password" required />
      </div>
      <button @click="login">登录</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: '花傲天',
        password: '123'
      }
    };
  },
  methods: {
    login() {
      uni.request({
        url: 'http://localhost:8090/foodapp/user/login',
        method: 'POST',
        data: this.user,
        success: (res) => {
          if (res.data.success == true) {
            uni.showToast({
              title: "欢迎 " + this.user.username
            });
            // 登录成功后,返回上一页并传递登录状态
            uni.navigateBack({
              delta: 1,
              success: () => {
                // 使用事件总线发送登录成功的消息
                uni.$emit('loginSuccess', this.user.username);
              }
            });
          } else {
            uni.showToast({
              title: '登录失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>
<style scoped>
input {
  border: 2px solid #7c7c7c;
  height: 5vh;
	}
	button{
		width: 60vw;
		margin-top: 20px;
		background-color: #1caefa;
	}
 p{
	 margin: 5px 0;
 }
</style>
